<template  >
    <div class="all">
      <!-- 页头 -->
      <el-container class="allContainer">
    <el-header class="head">
      <div class="divHead"></div>
      <el-row >
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <div> <div class="topFont">车辆进出记录</div></div>
          </div></el-col>
        <div  class="divBtn">
            <el-button size="mini" type="danger" icon="el-icon-download" @click="downExcel">导出</el-button>
            <el-button size="mini" type="warning" icon="el-icon-delete" @click="delByIds">批量删除</el-button>
        </div>
      </el-row>
    </el-header>
    <el-main class="bottomMain">
      <div class="divMain">
      <template>
        <!-- 模糊查询 -->
        <div class="mainTop">
    <div class="divInputAll">
      <!-- 输入框 -->
      <div class="divInput">
          <div class="inputFont">车辆号码：</div>
        <div style="float:left;">
          <el-input size="mini"
          placeholder="请输入内容"
          v-model="likeCar.carNum"
          :clearable="true">
        </el-input>
        </div>
      </div>
      <div class="divInput">
          <div class="inputFont">进入时间：</div>
        <div style="float:left;">
            <el-date-picker size="mini" v-model="likeCar.accessIn" type="datetime" format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss" style="float: left;width: 200px;"></el-date-picker>
        </div>
      </div>
      <div class="divInput">
          <div class="inputFont">离开时间：</div>
        <div style="float:left;">
          <el-date-picker size="mini" v-model="likeCar.accessOut" type="datetime" format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss" style="float: left;width: 200px;"></el-date-picker>
        </div>
      </div>
        <div  class="likeBtn">
          <el-button size="mini" type="success" icon="el-icon-search" @click="loadCarsTwo">查询</el-button>
        <el-button size="mini" plain  @click="loadCarsNull">重置</el-button>
        </div>
      </div>
    </div>
      </template>
      <!-- 查所有 -->
      <div class="divSelAll">
        <template>
    <el-table
    :data="carList"
      border
      style="width: 100%;font-size: small;margin: auto;"
      @selection-change="handleSelectionChange"
      :row-style="{height:'22px'}"
      :cell-style="{padding:'2px'}"
      >
      <el-table-column
        fixed
        type="selection"
        prop="visitorId"
        width="60">
      </el-table-column>
      <el-table-column
      prop="carNum"
      label="车牌号码"
      width="90">
    </el-table-column>
    <el-table-column
      prop="carBrand"
      label="车辆型号"
      width="190">
    </el-table-column>

    <el-table-column
      prop="visitorName"
      label="车主姓名"
      width="100">
    </el-table-column>
    <el-table-column
      prop="visitorTel"
      label="联系方式"
      width="110">
    </el-table-column>

    <el-table-column
      prop="carModel"
      label="车辆品牌"
      width="80">
    </el-table-column>
    <el-table-column
      prop="carTypeName"
      label="车辆类型"
      width="80">
    </el-table-column>
    <el-table-column
      prop="accessIn"
      label="开始时间"
      width="160">
    </el-table-column>
    <el-table-column
      prop="accessOut"
      label="结束时间"
      width="160">
    </el-table-column>

    <el-table-column
    prop="carId"
      label="操作"
      width="131">
        <template slot-scope="scope">
          <el-button type="text" size="small" style="margin-left: 5px;" @click="delById(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </template>
      </div>
      <div class="divPage">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.likeCar.pageNow"
        :page-sizes="[2, 10, 30, 40]"
        :page-size="this.likeCar.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pages.total">
      </el-pagination>
    </div>
    </div>
  </el-main>

  </el-container>

  </div>
  </template>

  <script>
  export default {
    data() {
      return {
        likeCar:{
          carNum:"",
          accessIn:"",
          accessOut:"",
          pageSize:'2',
          pageNow:'1',
        },
        pages:{
          total:'',
        },
        carTypeList:[],
        carList: [],
        carByIdList: [],
        visitorIds:[],
      };
    },
    methods: {
          downExcel() {
          this.$axios
            .post("cars/exportExcel", this.likeCar,{responseType: 'blob'})
            .then((res) => {
              let fileName = res.headers["content-disposition"].split("=")[1];//得到后端生成的文件名
              let url = window.URL.createObjectURL(new Blob([res.data]));
              let dom = document.createElement("a");
              dom.style.display = "none";
              dom.href = url;
              dom.setAttribute("download", fileName); //指定下载后的文件名，防跳转
              document.body.appendChild(dom);
              dom.click();
              // 释放内存
              dom.parentNode.removeChild(dom)
              window.URL.revokeObjectURL(dom.href);
            })
            .catch(function (error) {
              console.log(error);
            });
        },
        loadCarsTwo(){
          this.$axios.post("cars/selAllTwo",this.likeCar)
          .then(res=>{
            this.carList = res.data.data.carListTwo.list;
            this.pages.total = res.data.data.total;
            if(this.pages.total<=this.likeCar.pageSize&&this.likeCar.carNum!=null){
                this.likeCar.pageNow=1;
            }
            if(this.pages.total<=this.likeCar.pageSize&&this.likeCar.accessIn!=null){
                this.likeCar.pageNow=1;
            }
            if(this.pages.total<=this.likeCar.pageSize&&this.likeCar.accessOut!=null){
                this.likeCar.pageNow=1;
            }
          });
          this.carTypes();
        },
        loadCarsNull(){
          this.likeCar.carNum='';
          this.likeCar.accessIn='';
          this.likeCar.accessOut='';
          this.loadCarsTwo();
        },
        handleSizeChange(val) {
          this.likeCar.pageSize= val;
          this.loadCarsTwo();
        },
        handleCurrentChange(val) {
          this.likeCar.pageNow= val;
          this.loadCarsTwo();
        },
        selectChange(val) {
          this.value = val;
          this.loadCarsTwo();
        },
        handleSelectionChange(val) {
          // console.log(val)
          this.listId = val;
        },
        //删除事件
          delByIds(){
            // 声明空数组,这里的数组是后端需要的数据
            const visitorIds= new Set();
            //遍历勾选数据取自己需要的id等这里是和后端需要的参数对应
            for(let i=0;i<this.listId.length;i++){
              visitorIds.add(this.listId[i].visitorId)//把取出的对象push到数组里
            }
            this.$axios.post("cars/delByIds",visitorIds)
            .then(res=>{
              if(res.data.code==200){
                alert("删除成功");
                this.loadCarsTwo();
              }
            })
          },
        delById(row){
          let visitorId=row.visitorId;
          this.$axios.delete("cars/"+visitorId)
            .then(res=>{
              if(res.data.code==200){
                alert("删除成功");
                this.loadCarsTwo();
              }
            })
        },
    },
    mounted(){
      this.loadCarsTwo();
    },
  };
  </script>
  <style >
  .all{
    width: 100%;
    height: 700px;
    background-color: rgb(240,242,245);
  }
  .allContainer{
    width:98%;;
    margin: auto;
  }
  .head{
    background-color: white;
    width: 100%;
    height: 10px;
    line-height: 60px;
    margin: auto;
    border-radius: 10px;
    margin-top: 5px;
  }
  .divHead{
    background-color: cornflowerblue;
    width: 7px;
    height: 50%;
    float: left;
    margin-top: 15px;
    border-radius: 2px;
    margin-left: 8px;
  }
  .topFont{
    float:left;
    margin-left: 18px;
    font-size: 14px;
    font-weight: 900;
  }
  .divBtn{
    float: right;
    margin-right: 10px;
  }
  .bottomMain{
    border-radius: 8px;
    width: 100%;
    height: 620px;
    margin: auto;
    margin-top: 5px;
  }
  .divMain{
    width: 100%;
    height: 100%;
  }
  .mainTop{
    width:100%;
    height:13%;
    margin: auto;
    border:1px solid darkgray;
    border-radius: 5px;
  }
  .divInputAll{
    background-color: white;
    width: 100%;
    height: 40px;
    line-height: 40px;
    margin: auto;
    border-radius: 10px;
    margin-top: 5px;
  }
  .divInput{
    border: 0px solid red;
    width:23%;
    height: 100%;
    line-height: 60px;
    margin-left: 30px;
    float: left;
  }
  .divSelect{
    border: 0px solid red;
    width:24.9%;
    height: 100%;
    line-height: 60px;
    margin-left: 30px;
    float: left;
  }
  .likeBtn{
    float: right;
     margin-right: 12px;
     line-height: 60px;
  }
  .inputFont{
    float:left;
    font-size: 10px;
  }
  .optionFont{
    float: right;
    color: #8492a6;
    font-size: 10px;
  }
  .divSelAll{
    border: 0px solid red;
    width:100%;
    height: 70%;
    margin-top: 8px;
    line-height: 20px;
  }
  .divPage{
    border: 0px solid red;
    width:100%;
    height: 8%;
    margin-top: 20px;
    line-height: 20px;
  }
  .el-dialog{
    display: flex;
    flex-direction: column;
    margin:0 !important;
    position:absolute;
    top:50%;
    left:57.5%;
    transform:translate(-50%,-50%);
    height:700px;
    width: 1135px;
    max-height:calc(100% - 30px);
    max-width:calc(100% - 30px);
  }
  .el-dialog .el-dialog__body{
    flex:1;
    overflow: auto;
  }
  .dialogAll{
    border: 0px solid red;
    width: 98%;
    height: 105%;
    margin: auto;
    margin-top: -30px;
  }
  .left{
    border: 0px solid red;
    width: 35%;
    height: 100%;
    float: left;
  }
  .right{
    border: 0px solid red;
    width: 64%;
    height: 100%;
    float: right;
  }
  .leftFont,.rightFont{
    border: 0px solid red;
    width: 90%;
    height: 5%;
    line-height: 20px;
    text-align: left;
    font-weight: 500;
    font-family: "微软楷体";
    margin-left: 10px;
  }
  .leftForm,.rightForm{
    border: 2px dashed #8492a6;
    border-radius: 10px;
    width: 99%;
    height: 94%;
  }
  .visitorForm{
    border: 0px solid red;
    width: 90%;
    height: 95%;
    margin: auto;
    margin-top: 30px;
    margin-left: 35px;
  }
  .carForm{
    border: 0px solid red;
    width: 90%;
    height: 44%;
    margin: auto;
    margin-top: 30px;
    margin-left: 35px;
  }
  </style>
